<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Mapbox-Example</title>
  <link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css">
  <link rel="stylesheet" href="./css/style.css">
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
</head>

<body>
  <div id="map"></div>

  <script>
    /** 
     * 使用高德瓦片数据作为底图，尽量控制缩放级别在整数级别，否则地图会模糊
     */
    
    // mapboxgl.accessToken = 'pk.eyJ1IjoiaHVhbmdsaWkiLCJhIjoiY2ptbjJsZXRsMHBlNzNsbGIycTk3eWU0biJ9.Pj_8_ER8nD7UQSSeOg4JZA';
    var map = new mapboxgl.Map({
      container: "map",
      // style: 'mapbox://styles/mapbox/streets-v9'
      style: {
        "version": 8,
        "layers": [{
          "id": "d1d62da5d6284889a6e9aab4a3ceb106",
          "type": "raster",
          "source": "amap",
          'paint': {}
        }],
        "sources": {
          "amap": {
            "type": "raster",
            "tileSize": 256,
            "tiles": [
              "http://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
              "http://webrd02.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
              "http://webrd03.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}",
              "http://webrd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=7&x={x}&y={y}&z={z}"
            ]
          },
        }
      },
      center: [104.29318, 35.70000],
      zoom: 4,
      minZoom: 3,
      maxZoom: 17
    });
    map.addControl(new mapboxgl.NavigationControl(), 'top-right');
  </script>
</body>

</html>